<template>
  <div class="sort" v-cloak>
    <div class="mark"></div>
    <ul class="list">
      <li class="listItem" v-for="(item, i) in sortData" :key="i" @click="addClassFun(item)">
        <p class="contList">
          <text class="text" :class="[sort === item.value ? 'active' : '']">{{item.name}}</text>
          <span class="upDown">
            <text class="up">▲</text>
            <text class="down" :class="[sort === item.value ? 'active' : '']">▼</text>
          </span>
        </p>
      </li>
    </ul>
  </div>
</template>
<script>
import store from '@/store/completion'

export default {
  name: 'sort',
  methods: {
    addClassFun (item) {
      store.commit('changeSort', item.value)
      store.dispatch('getLedger', this)
      this.$emit('closeList')
    }
  },
  computed: {
    sortData () {
      return store.state.sortData
    },
    sort () {
      return store.state.sort
    }
  }
}
</script>
<style scoped>
.sort{
  width: 750px;
  flex: 1;
}
.mark{
  width: 750px;
  background-color: rgba(0,0,0,0.4);
  position: relative;
  flex: 1;
}
.list{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  width: 750px;
  padding-left: 20px; 
  padding-right: 20px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.listItem{
  width: 170px;
  height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.contList{
  width: 170px;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
}
.text{
  font-size: 25px;
  font-family:PingFangSC-Regular;
  color: #999;
  padding-right: 10px;
}
.active{
  color: rgba(62,175,252,1);
}
.upDown{
  display: block;
  width: 28px;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.up{
  /* color: rgba(62,175,252,1); */
  color: #999;
  font-size: 14px;
}
.down{
  color: #999;
  font-size: 14px;
}
[v-cloak] {
  display: none;
}
</style>